<template>
  <div>
    <div :class="{red:isRed}">
      我是动态class
    </div>
    <!-- 动态class -->
    <!-- 1、绑定对象（常用）判断是否应用指定类名  语法{类名：是否应用这个类名} -->
    <!-- 1、绑定数组 应用多个类名  语法['类名1','类名2'] -->
     <div :style="{color:col,fontSize:'10px'}">
      我是动态style
     </div>
     <!-- 动态style -->
     <!-- 1、绑定对象（常用） 对象属性名是样式名，属性值是样式值 语法{CSS样式名:CSS样式值} -->
     <!-- 1、绑定数组 很不常用[] -->
    <button @click="isRed=!isRed">按钮</button>
  </div>
</template>

<script>
export default {
 

  data() {
    return {
      isRed:false,
      col:"red"

    };
  },

  methods: {
    
  },
};
</script>

<style lang="less" scoped>
div{
  width: 200px;
  height: 200px;
  background-color: green;
  font-size: 30px;
}
.red{
  color: red;
}
</style>